import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { ChartData } from '../chart-option';

@Component({
  selector: 'app-pie2-chart',
  templateUrl: './pie2-chart.component.html',
  styleUrls: ['./pie2-chart.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Pie2ChartComponent implements OnChanges {
  @Input() range = 1; // 最大值和最小值的差值
  @Input() title = ''; // 图的标题
  @Input() subText = ''; // 额外内容
  @Input() data: ChartData[] = []; // 数据
  @Input() roseType: '' | 'pie' | 'circle' = ''; // 什么形状，空为饼图，pie 为大小区分, circle 为环
  @Input() centerText = false;
  @Input() fontSize = 30;
  @Input() givenHeight = '400px';
  theme: string;
  options = {};

  getHeight() {
    return this.givenHeight;
  }

  constructor() { }

  ngOnChanges(): void {
    // console.log(this.range);
    this.options = {
      title: {
        text: this.title,
        left: 'center',
        top: 20,
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      visualMap: {
        show: false,
        min: 0,
        max: this.range*2,
        inRange: {
          colorLightness: [0, 1]
        }
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: this.data.sort(function (a, b) { return a.value - b.value; }),
          roseType: 'radius',

          labelLine: {

            smooth: 0.2,
            length: 10,
            length2: 20
          },
          itemStyle: {
            color: '#c23531',
            // shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        },


          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        }
      ]
    };
  }

}
